<template>
  <view class="bottom-banner">
    <view class="bottom-banner-title"> 甜蜜资讯 </view>
    <swiper
      class="bottom-banner-swiper"
      :circular="true"
      :autoplay="true"
      :interval="3000"
      indicator-dots
      indicator-active-color="#fff"
    >
      <swiper-item
        class="bottom-banner-swiper-item"
        v-for="(item, index) in homeFooterBannerList"
        :key="index"
      >
        <image
          class="bottom-banner-swiper-item-image"
          :src="item.adImg"
        />
      </swiper-item>
    </swiper>
  </view>
</template>

<script>
export default {
  name: "BottomBanner",
  data() {
    return {
      homeFooterBannerList: [
        {
          adImg: "/static/images/index/news/1.png",
          adTitle: "京东校园"
        },
        {
          adImg: "/static/images/index/news/2.png",
          adTitle: "小雪的省钱攻略"
        }
      ]
    }
  }
}
</script>

<style lang="scss" scoped>
.bottom-banner {
  width: 100%;
  overflow: hidden;

  &-title {
    font-size: $uni-font-size-lg;
    color: $uni-text-color;
    font-weight: 500;
    margin-bottom: $uni-spacing-row-sm;
  }

  &-swiper {
    width: 100%;
    height: 273.5rpx;
    border-radius: $uni-border-radius-lg;
    &-item {
      width: 100%;
      height: 100%;
      &-image {
        border-radius: $uni-border-radius-lg;
        width: 100%;
        height: 100%;
      }
    }
  }
}
</style>
